<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
      <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.date"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.date}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="name"
      label="用户名"
      width="130">     
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.name"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.name}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="goodName"
      label="商品"
      width="280">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.goodName"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.goodName}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="count"
      label="数量(个)"
      width="130">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.count"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.count}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价(元)"
      width="130">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.price"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.price}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="totalPrice"
      label="总价(元)"
      width="130">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.totalPrice"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.count * scope.row.price}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="130">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.province"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.province}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="130">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.city"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.city}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="350">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.address"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.address}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="130">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.zip"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.zip}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="160">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.date"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.date}}</span>
        </template>   
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small" @click="scope.row.show = true">编辑</el-button>
        <el-button type="text" size="small" @click="scope.row.show = false">保存</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          goodName: '辣条',
          count:2,
          price:5,
          totalPrice:0,
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          show: false
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          count:2,
          price:5,
          goodName: '辣条',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
          show: false
        }, {
          date: '2016-05-01',
          name: '王小虎',
          goodName: '辣条',
          count:2,
          price:5,
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
          show: false
        }, {
          date: '2016-05-03',
          name: '王小虎',
          goodName: '辣条',
          count:2,
          price:5,
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
          show: false
        }]
      }
    }
  }
</script>